define(['durandal/app', 'durandal/composition', 'knockout', 'jquery'],
    function (app, composition, ko, $) {
        function ViewModel() {
            var self = this;
            var $dom = null;
            var _curIndex = 0;
            var _timer = null;

            self.albums = ko.observableArray();

            self.leftScroll = leftScroll;
            self.rightScroll = rightScroll;

            composition.addBindingHandler('Example03', {
                init: function (dom) {
                    $dom = $(dom);

                    init();
                }
            });

            function init() {
                initAlbums(10);
                animate();
            }

            function initAlbums(n) {
                var albums = [];
                for (var i = 0; i < n; i++) {
                    var item = {};
                    item.bgImg = 'url(app/album/example03/images/bg' + i % 6 + '.png)';
                    albums.push(item);
                }
                self.albums(albums);
            }

            function animate() {
                initScroll();

                _timer = setInterval(function () {
                    rightScroll();
                }, 3000);

                jQuery.fn.hover = function( fnOver, fnOut ) {
                    return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
                };
                $dom.find('.scroll-left, .scroll-right, .scroll-div').hover(
                    function () {
                        clearInterval(_timer);
                    },
                    function () {
                        _timer = setInterval(function () {
                            rightScroll();
                        }, 3000);
                    }
                );
            }

            function initScroll(curIndex) {
                var el = $dom.find('.scroll-div');
                _curIndex = curIndex || 0;
                if (_curIndex < 0) {
                    _curIndex = el.length + _curIndex;
                }
                if (_curIndex >= el.length) {
                    _curIndex = el.length - _curIndex;
                }
                for (var i = 0; i < el.length; i++) {
                    var eli = $dom.find(el[i]);
                    if (i === _curIndex) { //正中
                        eli.css({
                            transform: "",
                            visibility: "visible",
                            opacity: 1,
                            filter: "none"
                        });
                    } else if (i === (_curIndex + 1 >= el.length ? _curIndex + 1 - el.length : _curIndex + 1)) {  //右一
                        eli.css({
                            transform: "translateX(4rem) translateZ(-0.9rem) rotateY(24deg)",
                            visibility: "visible",
                            opacity: 0.8,
                            filter: "blur(2px)"
                        });
                    } else if (i === (_curIndex - 1 >= 0 ? _curIndex - 1 : el.length + _curIndex - 1)) { //左一
                        eli.css({
                            transform: "translateX(-4rem) translateZ(-0.9rem) rotateY(-24deg)",
                            visibility: "visible",
                            opacity: 0.8,
                            filter: "blur(2px)"
                        });
                    } else if (i === (_curIndex + 2 >= el.length ? _curIndex + 2 - el.length : _curIndex + 2)) { //右二
                        eli.css({
                            transform: "translateX(7.75rem) translateZ(-2.93rem) rotateY(31deg)",
                            visibility: "visible",
                            opacity: 0.6,
                            filter: "blur(4px)"
                        });
                    } else if (i === (_curIndex - 2 >= 0 ? _curIndex - 2 : el.length + _curIndex - 2)) { //左二
                        eli.css({
                            transform: "translateX(-7.75rem) translateZ(-2.93rem) rotateY(-31deg)",
                            visibility: "visible",
                            opacity: 0.6,
                            filter: "blur(4px)"
                        });
                    } else {
                        eli.css({
                            transform: "",
                            visibility: "hidden",
                            opacity: 0,
                        });
                    }
                }
            }

            function leftScroll() {
                initScroll(_curIndex - 1)
            }

            function rightScroll() {
                initScroll(_curIndex + 1)
            }

        }

        return ViewModel;
    });
